<template>
  <div class="trend" style="width: 100%">
    <el-card class="trend-card" shadow="hover">
      <template #header>
        <span>
          <vab-icon icon="line-chart-fill" />
          流量统计
        </span>
      </template>
      <vab-chart
        class="trend-echart"
        :init-options="initOptions"
        :option="option"
        style="width: 100%"
        theme="vab-echarts-theme"
      />
    </el-card>
  </div>
</template>

<script>
  import VabChart from '@/extra/VabChart'
  import { getCarTraffic, getPeopleTraffic } from '@/api/sys'

  export default {
    components: {
      VabChart,
    },
    props: {
      areaNo: {
        type: String,
        default: '',
        require: true,
      },
      startDate: {
        type: String,
        default: '',
        require: true,
      },
      endDate: {
        type: String,
        default: '',
        require: false,
      },
    },
    data() {
      return {
        isQuerying: false,
        initOptions: {
          renderer: 'svg',
        },
        option: {
          tooltip: {
            trigger: 'axis',
            extraCssText: 'z-index:1',
          },
          legend: {
            data: ['人流量', '车流量'],
            top: 0,
            padding: 10,
          },
          grid: {
            top: '10%',
            left: '2%',
            right: '2%',
            bottom: '0',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月',
              ],
              boundaryGap: false,
              axisLabel: {
                rotate: 35,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '人流量',
              type: 'line',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {},
              areaStyle: {
                opacity: 0.8,
              },
            },
            {
              name: '车流量',
              type: 'line',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {},
              areaStyle: {
                opacity: 0.8,
              },
            },
          ],
        },
      }
    },
    computed: {
      propsChange() {
        const { areaNo, startDate, endDate } = this
        return {
          areaNo,
          startDate,
          endDate,
        }
      },
    },
    watch: {
      propsChange(val) {
        this.getChartData(val)
      },
    },
    created() {},
    methods: {
      getChartData({ areaNo, startDate, endDate }) {
        if (!startDate || !endDate) {
          return
        }
        const carPromise = getCarTraffic({
          areaNo,
          startDate,
          endDate,
        })
        const peoplePromise = getPeopleTraffic({
          areaNo,
          startDate,
          endDate,
        })
        Promise.all([carPromise, peoplePromise])
          .then((res) => {
            // console.log(res)
            const res1 = res[0]
            const res2 = res[1]
            let categoryList = [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ]
            let carList = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            let peopleList = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            if (res1 && res1.status === 0 && Array.isArray(res1.data)) {
              categoryList = res1.data.map((rs) => rs.dayStr)
              carList = res1.data.map((rs) => rs.countNumber)
            } else {
              let msg = '查询失败，请重试！'
              if (res1.status === 10001 && res1.msg) {
                msg = res1.msg
              }
              this.$baseMessage(msg, 'error', 'vab-hey-message-error')
            }
            if (res2 && res2.status === 0 && Array.isArray(res2.data)) {
              categoryList = res2.data.map((rs) => rs.dayStr)
              peopleList = res2.data.map((rs) => rs.countNumber)
            }
            this.option.xAxis = [
              {
                type: 'category',
                data: categoryList,
                boundaryGap: false,
                axisLabel: {
                  rotate: 35,
                },
              },
            ]
            this.option.series = [
              {
                name: '人流量',
                type: 'line',
                data: peopleList,
                symbol: 'circle',
                smooth: true,
                yAxisIndex: 0,
                showSymbol: false,
                lineStyle: {},
                areaStyle: {
                  opacity: 0.8,
                },
              },
              {
                name: '车流量',
                type: 'line',
                data: carList,
                symbol: 'circle',
                smooth: true,
                yAxisIndex: 0,
                showSymbol: false,
                lineStyle: {},
                areaStyle: {
                  opacity: 0.8,
                },
              },
            ]
          })
          .catch((err) => {
            console.log(err)
            this.$baseMessage(
              '查询失败，请重试！',
              'error',
              'vab-hey-message-error'
            )
          })
          .then(() => {
            this.$emit('dataReady', true)
          })
      },
    },
  }
</script>
